<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>web04</title>
		<meta name="author" content="ch choongang" />
		<!-- Date: 2013-01-10 -->
	</head>
	<body>
		<div id="d"> div입니다 </div>
		script로 모든 Element에 접근할 수 있습니다.<br>
		.getElementById("아이디");
		.getElementByTagName("태그이름");<br>
		<img id="s0" src="jejuIsland.jpeg" width="50">
		<img id="s1" src="cake.jpg" width="50">
		<img id="s2" src="girl.jpg" width="50">
		<img id="s3" src="shoes.jpg" width="50">
		<img id="s4" src="yuchae.jpeg" width="50"><br>
		<img id="big" src="jejuIsland.jpeg">
		<script>
			var s0=document.getElementById("s0");
			var s1=document.getElementById("s1");
			var s2=document.getElementById("s2");
			var s3=document.getElementById("s3");
			var s4=document.getElementById("s4");
			var s5=document.getElementById("big");
			s0.onclick=function(){
				big.src=s0.src;
			}
			s1.onclick=function(){
				big.src=s1.src;
			}
			s2.onclick=function(){
				big.src=s2.src;
			}
			s3.onclick=function(){
				big.src=s3.src;
			}
			s4.onclick=function(){
				big.src=s4.src;
			}
			
			
			/*
			var d=document.getElementById("d");
			//alert(d.innerHTML);
			d.innerHTML="div내용을 바꾸자";
			var img1=document.getElementById("img1");
			var original=img1.src;
			var btn1=document.getElementById("btn1");
			btn1.onclick=function(){
				img1.src="yuchae.jpeg";
			
			}
			*/
		</script>
		<br>
		
		<button id="left"> 왼쪽그림 </button>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button id="right"> 오른쪽그림 </button><br><br>
		<div id="t"> 그림의 제목 : </div>
		<img id="gallery">
		<script>
			var left=document.getElementById("left");
			var right=document.getElementById("right");
			var gallery=document.getElementById("gallery");
			var t=document.getElementById("t");
			images=["jejuIsland.jpeg","cake.jpg","girl.jpg","shoes.jpg","yuchae.jpeg"];
			titles=["제주도","하라인 케익","인기","유채꽃 아기신","유채밭"];
			var i=0;
			gallery.src=images[i];
			left.onclick=function(){
				i--; if(i<0) i=images.length-1;
				gallery.src=images[i];
				t.innerHTML=titles[i];
			}
			right.onclick=function(){
				i++; if(i>=images.length) i=0;
				gallery.src=images[i];
				t.innerHTML=titles[i];
			}
			//setInterval(평션, 시); 반복하기
			setInterval(left.onclick, 5000);
		</script>
	</body>
</html>

